import React, { createContext, useContext } from "react";

const context1 = createContext();
const context2 = createContext();

const Child2 = () => {
  // useContext只管接收context传递过来的值
  // 里面要传入一个参数，就是context对象，得到的是那个对象的Provider的value
  const { name } = useContext(context1);
  const { nickname } = useContext(context2);

  return (
    <div>
      child2组件 - {name} - {nickname}
    </div>
  );

  // return (
  //   <context1.Consumer>
  //     {(value) => {
  //       return (
  //         <context2.Consumer>
  //           {(val) => (
  //             <div>
  //               child2组件 - {value.name} - {val.nickname}
  //             </div>
  //           )}
  //         </context2.Consumer>
  //       );
  //     }}
  //   </context1.Consumer>
  // );
};

const Child = () => {
  return (
    <context2.Provider
      value={{
        nickname: "xiaosan",
      }}
    >
      <div>child组件</div>
      <Child2></Child2>
    </context2.Provider>
  );
};

const App = () => {
  return (
    <context1.Provider
      value={{
        name: "zhangsan",
      }}
    >
      <h3>useContext</h3>
      <Child></Child>
    </context1.Provider>
  );
};

export default App;
